<template>
	<view class="zh-user-center" v-if="show">
		<view class="header">
			<view class="content display-flex align-center">
				<image :src="user.avatar?util.previewImg(user.avatar):'/static/icons/userCenter/avatar.png'" class="avatar-img" @click="navigateTo('/pages/userCenter/user/index')"/>
				<view class="ml-35 flex">
					<view @click="navigateTo('/pages/userCenter/user/index')">
						<text class="font-bold font-36 font-252525">{{ user.nickName}}</text>
					</view>
					<view class="display-flex justify-between align-center mt-25" 
						@click.stop="navigateTo((isItCertified === IsItCertified.noSubmit || isItCertified === IsItCertified.noBind)?'/pages/auth/certify':'/pages/auth/certifyDetail')">
						<view class="display-flex align-center" v-if="isItCertified === IsItCertified.agree">
							<text class="font-24 font-8A8A8A ">{{ user.shopName }}</text>
						<!-- 	<image src="@/static/icons/userCenter/certification_icon.png" class="certification-icon"/> -->
							<view class="certify-btn display-flex align-center justify-center">
								<image src="@/static/icons/certify_icon_blue.png" class="certify-icon"/>
								<text>已认证</text>
							</view>
						</view>
						<view class="display-flex align-center" 
							v-if="isItCertified === IsItCertified.reject 
							|| isItCertified === IsItCertified.noSubmit 
							|| isItCertified === IsItCertified.waitAudit
							|| isItCertified === IsItCertified.noBind">
							<image src="@/static/icons/certify_icon_blue.png" class="certify-icon"/>
							<text class="font-24 font-8A8A8A ml-10">通过企业认证, 开启VIP服务</text>
							<view v-if="isItCertified === IsItCertified.waitAudit">
								<text class="certify-btn display-inline">等待审批</text>
							</view>
							<view v-if="isItCertified === IsItCertified.reject">
								<text class="font-24 font-bold ml-30 text-decoration font-EC1010">已驳回</text>
							</view>
							<view v-if="isItCertified === IsItCertified.noSubmit || isItCertified === IsItCertified.noBind">
								<text class="certify-btn display-inline">立即认证</text>
							</view>
							
						</view>
					</view>
				</view>
			</view>
		</view>
		
	<!-- 	<view class="section mt-20" v-for="(item, index) in menu.list" :key="index">
			<view class="title font-30 font-bold">{{ item.meta.title }}</view>
			<view class="content display-flex align-end">
				<view class="item" @click="certifyTo('/pages/storage/stock/index')" v-for="(item1, index1) in item.children" :key="index1">
					<image :src="IMG_URL + '/userCenter/stock.png'" class="item-icon"/>
					<text class="font-121212 font-24 display-block mt-15">{{ item1.meta.title }}</text>
				</view>
			</view>
		</view> -->
		
		<view class="section mt-20" v-if="getHasPermi('智慧云仓')">
			<view class="title font-30 font-bold">智慧云仓</view>
			<view class="content display-flex align-end">
				<view class="item" @click="certifyTo('/pages/storage/stock/index')" v-if="getHasPermi('云仓库存')">
					<image :src="IMG_URL + '/userCenter/stock.png'" class="item-icon"/>
					<text class="font-121212 font-24 display-block mt-15">云仓库存</text>
				</view>
				<view class="item" @click="certifyTo('/pages/storage/warehouseIn/index')" v-if="getHasPermi('我的进仓')">
					<image :src="IMG_URL + '/userCenter/warehouseIn.png'" class="item-icon"/>
					<text class="font-121212 font-24 display-block mt-15">我的进仓</text>
				</view>
				<view class="item" @click="certifyTo('/pages/storage/warehouseOut/index')" v-if="getHasPermi('我的出仓')">
					<image :src="IMG_URL + '/userCenter/warehouseOut.png'" class="item-icon"/>
					<text class="font-121212 font-24 display-block mt-15">我的出仓</text>
				</view>
			</view>
		</view>
		<view class="section"  v-if="getHasPermi('买家中心')">
			<view class="title display-flex justify-between">
				<text class="font-30 font-bold">买家中心</text>
				<view class="display-flex align-center" @click="certifyTo('/pages/order/purchase/index')"  v-if="getHasPermi('采购订单列表')">
					<text class="font-24 font-999">全部订单</text>
					<image src="@/static/icons/right_arrow_deep.png" class="right-arrow"></image>
				</view>
			</view>
			<view class="content display-flex align-end">
				<view class="item" @click="certifyTo('/pages/order/purchase/index?status=' + OrderStatus.waitSure)" v-if="getHasPermi('采购订单列表')">
					<image :src="IMG_URL + '/userCenter/buy_01.png'" class="item-icon"/>
					<text class="font-121212 font-24 display-block mt-15">待确认</text>
					<view class="mark-position" v-if="Number(orderSummaryData.detail.saleConfirm) > 0">
						<u-mark type="plain" size="36" color="#EC1010" maxValue="9" :fontSize="28" :value="orderSummaryData.detail.saleConfirm"></u-mark>
					</view>
				</view>
				<view class="item" @click="certifyTo('/pages/order/purchase/index?status=' + OrderStatus.assert)"  v-if="getHasPermi('采购订单列表')">
					<image :src="IMG_URL + '/userCenter/buy_02.png'" class="item-icon"/>
					<text class="font-121212 font-24 display-block mt-15">待付款</text>
					<view class="mark-position" v-if="Number(orderSummaryData.detail.salePayment) > 0">
						<u-mark type="plain" size="36" color="#EC1010" maxValue="9" :fontSize="28" :value="orderSummaryData.detail.salePayment"></u-mark>
					</view>
				</view>
				<view class="item" @click="certifyTo('/pages/order/purchase/index?status=' + OrderStatus.paid)"  v-if="getHasPermi('采购订单列表')">
					<image :src="IMG_URL + '/userCenter/buy_03.png'" class="item-icon"/>
					<text class="font-121212 font-24 display-block mt-15">待收款</text>
					<view class="mark-position" v-if="Number(orderSummaryData.detail.saleCollection) > 0">
						<u-mark type="plain" size="36" color="#EC1010" maxValue="9" :fontSize="28" :value="orderSummaryData.detail.saleCollection"></u-mark>
					</view>
				</view>
				<view class="item" @click="certifyTo('/pages/order/purchase/index?status=' + OrderStatus.done)" v-if="getHasPermi('采购订单列表')">
					<image :src="IMG_URL + '/userCenter/buy_04.png'" class="item-icon"/>
					<text class="font-121212 font-24 display-block mt-15">交易完成</text>
				</view>
			</view>
		</view>
		<view class="section mt-20" v-if="getHasPermi('卖家中心')">
			<view class="title display-flex justify-between">
				<text class="font-30 font-bold">卖家中心</text>
				<view class="display-flex align-center" @click="certifyTo('/pages/order/sale/index')" v-if="getHasPermi('销售订单列表')">
					<text class="font-24 font-999">全部订单</text>
					<image src="@/static/icons/right_arrow_deep.png" class="right-arrow"></image>
				</view>
			</view>
			<view class="content display-flex align-end flex-wrap">
				<view class="item" @click="certifyTo('/pages/order/sale/index?status=' + OrderStatus.waitSure)" v-if="getHasPermi('销售订单列表')">
					<image :src="IMG_URL + '/userCenter/sell_01.png'" class="item-icon"/>
					<text class="font-121212 font-24 display-block mt-15">待确认</text>
					<view class="mark-position" v-if="Number(orderSummaryData.detail.purchaseConfirm) > 0">
						<u-mark type="plain" size="36" color="#EC1010" maxValue="9" :fontSize="28" :value="orderSummaryData.detail.purchaseConfirm"></u-mark>
					</view>
				</view>
				<view class="item" @click="certifyTo('/pages/order/sale/index?status=' + OrderStatus.assert)" v-if="getHasPermi('销售订单列表')">
					<image :src="IMG_URL + '/userCenter/buy_02.png'" class="item-icon"/>
					<text class="font-121212 font-24 display-block mt-20">待付款</text>
					<view class="mark-position" v-if="Number(orderSummaryData.detail.purchasePayment) > 0">
						<u-mark type="plain" size="36" color="#EC1010" maxValue="9" :fontSize="28" :value="orderSummaryData.detail.purchasePayment"></u-mark>
					</view>
				</view>
				<view class="item" @click="certifyTo('/pages/order/sale/index?status=' + OrderStatus.paid)" v-if="getHasPermi('销售订单列表')">
					<image :src="IMG_URL + '/userCenter/buy_03.png'" class="item-icon"/>
					<text class="font-121212 font-24 display-block mt-15">待收款</text>
					<view class="mark-position" v-if="Number(orderSummaryData.detail.purchaseCollection) > 0">
						<u-mark type="plain" size="36" color="#EC1010" maxValue="9" :fontSize="28" :value="orderSummaryData.detail.purchaseCollection"></u-mark>
					</view>
				</view>
				<view class="item" @click="certifyTo('/pages/order/sale/index?status=' + OrderStatus.done)" v-if="getHasPermi('销售订单列表')">
					<image :src="IMG_URL + '/userCenter/buy_04.png'" class="item-icon"/>
					<text class="font-121212 font-24 display-block mt-15">交易完成</text>
				</view>
				<view class="item" @click="certifyTo('/pages/storage/goods/index')" v-if="getHasPermi('商城货物管理')">
					<image :src="IMG_URL + '/userCenter/goods.png'" class="item-icon"/>
					<text class="font-121212 font-26 display-block mt-15">商城货物</text>
				</view>
			</view>
		</view>
		<view class="section mt-20" v-if="getHasPermi('功能服务')">
			<view class="title font-30 font-bold">功能服务</view>
			<view class="content display-flex align-end">
				<view class="item"  @click="certifyTo('/pages/userCenter/subAccount/index')" v-if="getHasPermi('子账户管理')">
					<image :src="IMG_URL + '/userCenter/sub_account.png'" class="item-icon"/>
					<text class="font-121212 font-24 display-block mt-15">子账号管理</text>
				</view>
				<view class="item" @click="certifyTo('/pages/userCenter/address/index')" v-if="getHasPermi('我的地址')">
					<image :src="IMG_URL + '/userCenter/address.png'" class="item-icon"/>
					<text class="font-121212 font-24 display-block mt-15">我的地址</text>
				</view>
				<view class="item" @click="certifyTo('/pages/userCenter/invoice/index')" v-if="getHasPermi('发票抬头')">
					<image :src="IMG_URL + '/userCenter/invoice_title.png'" class="item-icon"/>
					<text class="font-121212 font-24 display-block mt-15">发票抬头</text>
				</view>
			</view>
		</view>
		<view class="section2 display-flex align-center justify-between"  @click.stop="navigateTo('/pages/userCenter/setting/index')">
			<view class="left">
				<text>设置</text>
			</view>
			<view class="right">
				<image src="@/static/icons/right_arrow_deep.png" class="right-arrow"></image>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { reactive, ref, computed } from 'vue'
	import { util, nav, tip, system } from '@/utils'
	import { useAuthStore } from '@/store/auth'
	import { IsItCertified } from '@/enum/user'
	import { onHide, onLoad, onShow } from '@dcloudio/uni-app';
	import { OrderStatus } from '@/enum/order'
	import { order } from '@/api'
	import { IMG_URL } from '@/utils/constant'
	
	const authStore = useAuthStore()
	let user:any = reactive({})	
	let isItCertified = ref('')
	const show = ref(false)
	const menu:any = reactive({
		names:[]
	})
	
	const orderSummaryData:any = reactive({
		detail:{
			purchaseCollection: '0',
			purchaseConfirm: '0',
			purchasePayment: '0',
			saleCollection: '0',
			saleConfirm: '0',
			salePayment: '0',
		}
	})
	
	onLoad(() => {
		tip.showLoading('加载中...')
	})
	
	onShow(() => {
		if(!nav.isLogin()) {
			uni.reLaunch({
				url:'/pages/auth/login'
			})
			system.setTabBarBadge({
			  index: 2,
			  text: '0'
			})
		} else {
			show.value = true
			authStore.setUserInfo().then((res:any) => {
				user = res.user
				isItCertified.value = res.isItCertified
			})
			authStore.setRoutes().then((res:any) => {
				menu.names = res
			})
			orderSumList()
		}
		tip.hideLoading()
	})
	
	const orderSumList = () => {
		order.getOrderSummary({}).then((res:any) => {
			const data = res.data
			orderSummaryData.detail = {
				purchaseCollection: data.purchaseCollection.toString() || '0',
				purchaseConfirm: data.purchaseConfirm.toString() || '0',
				purchasePayment: data.purchasePayment.toString() || '0',
				saleCollection: data.saleCollection.toString() || '0',
				saleConfirm: data.saleConfirm.toString() || '0',
				salePayment:  data.salePayment.toString() || '0',
			}
		})
	}
	
	const certifyTo = (url:string) => {
		nav.navigateTo(url)
	}
	
	const navigateTo = (url:string) => {
		uni.navigateTo({
			url:url
		})
	}
	
	const getHasPermi = (value:string) => {
		return menu.names.includes(value)?true:false
	}
</script>
<style>
	page {
		background-color: #F5F5F5;
	}
</style>
<style lang="scss" scoped>
	.zh-user-center {
		padding-bottom:22rpx;
		.header {
			width:100%;
			height:295rpx;
			background: linear-gradient(0deg, #F5F5F5, #E0F2FE);
			color:#fff;
			display:block;
			position:relative;
			.content {
				position:absolute;
				bottom:32rpx;
				left: 40rpx;
				//padding: 160rpx 30rpx 0;
				.avatar-img {
					width: 108rpx;
					height:108rpx;
					border-radius: 56rpx;
				}
				.certification-icon {
					width: 114rpx;
					height: 38rpx;
					margin-left: 10rpx;
				}
				.certify-icon {
					width: 30rpx;
					height:30rpx;
				}
				.certify-btn {
					width:120rpx;
					height:40rpx;
					line-height: 40rpx;
					background: linear-gradient(90deg, #E9ECFF, #E1E7FF);
					//display:inline-block;
					font-size:20rpx;
					margin-left:20rpx;
					font-weight:bold;
					position:relative;
					color:#1F232F;
					text-align:center;
					border-radius: 20rpx;
				}
			}
		}
		.section {
			margin:24rpx;
			border-radius: 24rpx;
			background-color: $uni-bg-card-color;
			.title {
				padding:35rpx 22rpx 39rpx;
				color:#252525;
				.right-arrow {
					width: 28rpx;
					height: 28rpx;
					margin-left: 5rpx;
				}
			}
			.content {
				.item {
					width: 170rpx;
					text-align: center;
					display:inline-block;
					margin:0 0 42rpx;
					position:relative;
					font-size:0;
					.mark-position {
						position:absolute;
						right:50rpx;
						top:-10rpx;
					}
					.item-icon {
						width: 60rpx;
						height: 60rpx;
					}
				}
			}
		}
		.section2 {
			margin:24rpx;
			border-radius: 24rpx;
			background-color: $uni-bg-card-color;
			padding:33rpx 22rpx;
			.left {
				font-size: 24rpx;
			}
			.right {
				.right-arrow {
					width: 28rpx;
					height: 28rpx;
				}
			}
		}
	}
</style>
